<!DOCTYPE HTML>
<html lang="zh">
<head>

    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    <title>这是标题</title>

    <style type="text/css">

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        select,
        textarea,
        input[type="password"],
        input[type="text"] {
            outline: none;
        }

        input[type="button"],
        input[type="submit"] {
            outline: none;
        }
        a {
            color:#4abdcc;
            text-decoration:none;
        }
        ul {
            list-style:none;
        }
        html {
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        .clearfix:after{
            content:'';
            clear:both;
            overflow:hidden;
            height:0; 
            display:block; 
        }
        body {
            background: #fff;
            color: #5C5C5C;
            font:14px "HiraginoSansGB-Light","Gotham","Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;
            line-height:1.5;
            max-width: 600px;
            margin: 0 auto;
        }
        /* iphone 6 */
        /* iphone 6 plus */
        body {
          font-size: 1.4rem !important;
        }

        html {
          font-size: 62.5% !important;
        }

        @media screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
          html {
            font-size: 62.5% !important;
          }
        }
        @media screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
          html {
            font-size: 62.5% !important;
          }
        }
        body{
          background-image:url('');
          background-repeat: repeat;
          background-position: center;
          -webkit-background-size: 53px 53px;
          background-size: 53px 53px;
          padding-bottom: 2rem;
        }
        
        .slogan{
            padding: 6rem 0;
            margin: 0 auto;
        }
        .slogan i{
            display: block;
            margin: 0 auto;
            width: 166px;
            height: 19px;
            background-repeat: no-repeat;
            background-image: url('');
            -webkit-background-size: 169px auto;
            background-size: 169px auto;
        }

        .spot-text{
            margin: 0 2rem 5rem;
            position: relative;
        }
        .spot-text .left{
            margin-right: 35.6%;

        }
        .spot-text .left p{
            margin-bottom: 4.9rem;
            min-height: 18rem;
            font-size: 1.8rem;
            word-break: break-all;
            text-align: justify;
        }
        .spot-text .left i{
            display: block;
            width: 3.2rem;
            border-bottom: 0.3rem solid #5c5c5c;
            margin-bottom: 2rem;
        }
        .spot-text .left .poi{
            font-size: 1.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: -0.4rem;
            margin-left: -1px;
        }
        .spot-text .left span{
            font-size: 1rem;
            margin-left: -1px;
        }
        .spot-text .right{
            position: absolute;
            height: 100%;
            width: 50%;
            right: 0;
            top: 0;
        }
        .spot-text .right .date{
            position: absolute;
            right: 0;
            top: 0.2rem;
            text-align: right;
        }
        .spot-text .right .date p {
            font-size: 3.6rem;
            font-weight: bold;
            margin-bottom: -0.4rem;
        }
        .spot-text .right .date span {
            font-size: 1.4rem;
        }
        .spot-text .right .time{
           position: absolute;
            right: 1.3rem;
            bottom: 5.5rem;
            -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            font-size: 1.2rem;
        }
        .spot-list{
            margin: 0 2rem;
        }
        .spot-list li{
            margin-bottom: 2rem;
            position: relative;
        }
        .spot-list img{
            display: block;
            width: 100%;
        }
        .spot-list p{
            font-size: 1.2rem;
            word-break:break-all;
            margin: 2rem 0 4rem;
            padding-left: 1.8rem;
            position: relative;
        }
        .spot-list p::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            border-left: 1px solid #5c5c5c;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: left top;
            transform: scale(0.5);
            transform-origin: left top;
            z-index: -1;
        }

        .product{
            margin: 6rem 2rem 0;
        }
        .product i{
            display: block;
            width: 3.2rem;
            border-bottom: 0.3rem solid #5c5c5c;
            margin: 0 auto 4rem;
        }
        .product img{
            display: block;
            width: 15rem;
            height: 15rem;
            margin: 0 auto 0.8rem;
        }
        .product .info{
            font-size: 1.2rem;
            color: #c9c9c9;
            text-align: center;
            margin: 1.2rem 0 0.2rem;
        }
        .product .title{
            font-size: 1.6rem;
            text-align: center;
        }

        .footer-info{
            margin: 12rem 2rem 0;
            padding: 2rem 0;
            height: 8.8rem;
            position: relative;
            border-bottom: 0.3rem solid #5c5c5c;
        }
        .footer-info::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            border-top: 1px solid #5c5c5c;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: left top;
            transform: scale(0.5);
            transform-origin: left top;
            z-index: -1;
        }
        .footer-info .left{
            margin-right: 10rem;
            position: relative;
            height: 100%;
        }
        .footer-info .collection{
            display: block;
            width: 17.6rem;
            height: 1.9rem;
            background-image:url('');
            background-repeat: no-repeat;
            background-position: center;
            -webkit-background-size:17.6rem 1.9rem;
            background-size:17.6rem 1.9rem;
        }
        .footer-info p{
            font-size: 1.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 0.5rem;
        }
        .footer-info .author{
            position: absolute;
            left: 0;
            bottom: -4px;
            font-size: 1.1rem;
            color: #c9c9c9;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
        .footer-info .logo{
            display: inline-block;
            margin-right: 0.8rem;
            width: 5.8rem;
            height: 1rem;
            background-image:url('');
            background-repeat: no-repeat;
            background-position: center;
            -webkit-background-size:5.8rem 1rem;
            background-size:5.8rem 1rem;
            position: relative;
            top: 1px;
        }
        .footer-info .cover{
            position: absolute;
            right: 0;
            top: 2rem;
            width: 8.8rem;
            padding-bottom: 8.8rem;
            background-position: center;
            background-repeat: no-repeat;
            -webkit-backgroud-size:cover;
            background-size: cover;
        }
    </style>

    <script>
        if(/iPhone OS (\d)/.test(navigator.userAgent)){ 
            var version = parseInt(RegExp.$1);
            //app里 ios 9以上的版本，不使用 HiraginoSansGB 字体
            if(version >= 9){
                document.write('<style type="text/css">body{font-family:"Gotham" !important;}.font-ios-bold{font-family: "Gotham" !important;font-weight: bold !important;}</style>');
            }else{
                document.write('<style type="text/css">.font-ios-bold{font-family: "HiraginoSansGB-Regular","Gotham","Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti !important;font-weight: normal !important;}</style>');
            }
        }

    </script>
</head>
<body>

    <div class="slogan"><i></i></div>

    <div class="spot-text">
        <div class="left">
            <P>breadtrip_story_text</P>
            <div>
                <i></i>
                <div class="poi">breadtrip_poi</div>
                <span>by breadtrip_user_name</span>
            </div>
        </div>
        <div class="right">
            <div class="date">
                <p class="font-ios-bold">date_day</p>
                <span>date_month_years</span>
            </div>
            <div class="time">
                <date_week_time>
            </div>
        </div>
    </div>

    <ul class="spot-list">
        <breadtrip_story_image>
    </ul>
	<qrCode>

    <div class="footer-info">
        <div class="left">
            <i class="collection"></i>
            <p class="font-ios-bold">tripname</p>
            <div class="author font-ios-bold">
                <i class="logo"></i>breadtrip_user_name
            </div>
        </div>
        <div class="cover" style="background-image:url(breadtrip_trip_cover);"></div>
    </div>

</body>
</html>